<!-- 模板 -->
<template>
    <div class="pop" v-show="show">
        <transition :name="maskerTransition">
            <div class="pop__masker" v-show="isComponentShow"  @click="onHide"></div>
        </transition>
        <div class="pop__inner">
            <transition :name="dialogTransition" v-on:after-leave="afterLeave">
                <div class="pop__inner__dialog" v-show='isComponentShow'>
                    <div class="step step--one" v-show="step === 1">
                        <h3>输入您的手机号码</h3>
                        <div class="step__phones">
                            <input type="tel" maxlength="11" ref="phone" v-model="phone">
                            <div class="app-btn" @click="sendCode">获取验证码</div> 
                        </div>
                    </div>
                    <div class="step step--two" v-show="step === 2">
                        <h2>手机号码：{{phone}}<a href="javascript:;" class="step__changephone" @click="changePhone">更改</a></h2>
                        <h3>输入6位验证码</h3>
                        <a href="javascript:;" class="step-countdown" ref="codelable" @click="sendCode">发送验证码</a>
                        <div class="step__checkcode">
                            <input type="tel" v-model="smscode" v-on:input="calc" ref="smscode" maxlength="6">
                            <div class="step__checkcode__number" ref="numbers">
                                <span>{{ smscode.substr(0, 1)}}</span>
                                <span>{{ smscode.substr(1, 1)}}</span>
                                <span>{{ smscode.substr(2, 1)}}</span>
                                <span>{{ smscode.substr(3, 1)}}</span>
                                <span>{{ smscode.substr(4, 1)}}</span>
                                <span>{{ smscode.substr(5, 1)}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>


<!-- js -->
<script>
    import regular from '../../filter/regular.js';
    import { DB } from '../../config/db.js';

    export default{
       data(){
            return{
                step: 1,
                show: !1,
                isComponentShow: !1,
                maskerTransition: "aui-pop-masker",
                dialogTransition: "aui-pop",
                phone: "", //填写的手机号码
                smscode: "", // 短信验证码
                count: 60, //一分钟倒计时, 获取session里面的值，防止过快重复发送
                countDownLabel: "",
                timeout: null
            }
        },
        props: {
            isShow: {
                type: Boolean,
                default: !1
            }
        },
        watch: {
            isShow(){
                if(!this.isShow){
                    return;
                }

                this.show = 1;

                setTimeout(() => {
                    this.isComponentShow = !0;

                    this.$refs.phone.focus();

                }, 10);
            }
        },
        methods: {
            changePhone(){
                this.reset();
            },
            reset(){
                this.phone = '';
                this.smscode = '';
                this.count = 60;
                this.step = 1;
                this.timeout && clearTimeout(this.timeout);
                this.$refs.codelable.classList.remove("step-countdown--disabled");
                this.countDown();
            },
            onHide() {
                this.isComponentShow = !1;
            },
            // 点击确认按钮之后，可能会存在回调事件
            afterLeave(){
                this.show = !1;
                this.phone = '';
                this.smscode = '';
                this.count = 60;
                this.step = 1;
                this.timeout && clearTimeout(this.timeout);
                this.$refs.codelable.classList.remove("step-countdown--disabled");
                // 回调
                this.$emit('on-cb');
            },
            sendCode(){
                if(!regular.isPhone(this.phone)){
                    this.$aui.toast.show({
                        msg: "请输入有效的手机号码"
                    });
                    return;
                }
                
                // 发送短信验证码
                return this.$http.get(DB.ip + "activity/valcode", {
                    params: {
                        mobile: this.phone
                    }
                }).then((res) => {
                    if (res.data.resCode == "000000") {
                        this.step = 2;
                        this.startCountDown();
                    } else {
                        this.$aui.toast.show({
                            msg: res.data.resMsg
                        });
                    }
                }, (error) => {
                    this.$aui.toast.show({
                        msg: '系统错误！' + error.status
                    });
                });
            },
            // 开始倒计时，重置初始化一些内容
            startCountDown: function(){
                this.timeout && clearTimeout(this.timeout);
                this.count = 60;
                this.$refs.codelable.classList.add("step-countdown--disabled");
                this.countDown();
            },
            // 倒计时发送
            countDown(){
                this.count --;
                this.$refs.codelable.textContent = "重新发送(" + this.count + ")";
                if(this.count <= 0){
                    this.$refs.codelable.classList.remove("step-countdown--disabled");
                    this.$refs.codelable.textContent = "获取验证码";
                    this.timeout &&  clearTimeout(this.timeout);
                    return;
                }

                this.timeout = setTimeout(() => {
                    this.countDown();
                }, 1000);
            },
            calc(){
                if(this.smscode.length == 6){
                    this.$refs.smscode.blur();

                    this.$aui.loading.show({
                        type: 1
                    });

                    this.$http.post(DB.ip + 'activity/bind', {
                        openid: this.$store.state.userSubscribeInfo.openid,
                        mobile: this.phone,
                        valcode: this.smscode,
                        activityId: this.$store.state.currentActivityInfo.current.id,
                        channel: this.$store.state.userSubscribeInfo.channel
                    }).then((res) => {
                        this.$aui.loading.hide();  
                        if(res.data.resCode == '000000'){
                            this.$store.commit('showBind', false);
                            this.$store.commit('bindSuccess', this.$store.state.currentActivityInfo.current.id);
                            this.$store.commit('newUser', res.data.data.isNew);
                            this.smscode = "";
                            this.onHide();

                            if(this.$store.state.isNextActivityTip){
                                this.$store.commit('nextActivityTipCb', true);
                            }
                        }else{
                            this.$aui.toast.show(res.data.resMsg);
                            this.smscode = ""; 
                        }
                    }, (error) => {
                        this.$aui.loading.hide(); 
                        this.$aui.toast.show('系统错误，错误码：' + error.status);
                    });
                    
                }
            }
        }
    }
</script>

<!-- scss -->
<style lang="scss">
@import "../../styles/views/pop.scss";

.pop__inner__dialog{
    @at-root .step{
        width: 6.8rem;
        height: 4.0rem;
        background: url(../../assets/images/phone_bg.png) 50% no-repeat;
        background-size: cover; 
        @include flexbox;
        @include flexCenterVeri;
        @include flexCenterHori;
        @include flexboxVertical;
        &--one{
            >h3{
                line-height: 0.5rem;
                font-size: 0.32rem;
                color: #a8d0ee;
                margin-bottom: 0.15rem;
            }
            padding: 0 0.6rem;
        }
        
        @at-root &__phones{
            width: 100%;
            @include flexbox;
            >input{
                display: block;
                @include flexAuto;
                height: 0.8rem;
                background: #fff;
                border-radius: 5px 0 0 5px;
                padding: 0 0.2rem;
                font-size: 0.32rem;
                color: #000;
            }
            .app-btn{
                width: 2.0rem;
                height: 0.8rem;
                line-height: 0.8rem;
                background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f5c34c), color-stop(100%,#ff725f));
                display: block;
                text-align: center;
                color: #fff;
                font-size: 0.28rem;
                border-radius: 0 5px 5px 0;
            }
        }

        &--two{
            padding-top: 0.3rem;
            >h2{
                line-height: 0.4rem;
                font-size: 0.32rem;
                color: #a8d0ee;
                @at-root .step__changephone{
                    color: #a8d0ee;
                    border-radius: 0.1rem;
                    font-size: 0.24rem;
                    line-height: 0.4rem;
                    padding: 0 0.2rem;
                    margin-left: 0.2rem;
                    border: solid 1px #a8d0ee;
                    display: inline-block;
                    &:active{
                        color: #fff;
                        border: solid 1px #fff;
                    }
                }
            }
            >h3{
                line-height: 0.4rem;
                font-size: 0.28rem;
                color: #a8d0ee;
                margin-bottom: 0.1rem;
            }
            @at-root .step-countdown{
                display: inline-block;
                color: #114383;
                line-height: 0.55rem;
                border-radius: 0.1rem;
                background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f5c34c), color-stop(100%,#ff725f));
                margin-bottom: 0.2rem;
                padding: 0 0.2rem;
                font-size: 0.24rem;
                color: #fff;
                &--disabled{
                    background: #a8d0ee;
                    pointer-events: none;
                }
                &:not(.step-countdown--disabled):active {
                    background: #ff725f;
                }
            }

            @at-root .step__checkcode{
                width: 100%;
                position: relative;
                height: 0.8rem;
                >input{
                    width: 100%;
                    height: 0.8rem;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 9;
                    opacity: 0;
                    display: block;
                    background: none;
                    &:focus{
                        z-index: -9999;
                    }
                }
                &__number{
                    @include flexbox;
                    width: 100%;
                    @include flexCenterHori;
                    >span{
                        width: 0.8rem;
                        height: 0.8rem;
                        display: block;
                        margin-left: 0.2rem;
                        border-radius: 5px;
                        background: #fff;
                        line-height: 0.8rem;
                        text-align: center;
                        color: #000000;
                        font-size: 0.8rem;
                    }
                }
            }
        }
    }
}
</style>
